<template>
	<div :class="classes">
		<div :class="headClasses" v-if="showHead">
			<slot name="title">
                <Icon v-if="icon" :type="icon"></Icon>
				<strong v-if="title">{{title}}</strong>
			</slot>
		</div>
		<div :class="bodyClasses" :style="bodyStyles">
			<slot></slot>
		</div>
        <div :class="tipsClasses" v-if="haveTips">
            <slot name="tips"></slot>
        </div>
	</div>
</template>

<script>
const defPadding = 16;
import { oneOf } from "../../utils/index";
let prefixCls = "ifast";
import Icon from '../icon/icon.vue';
export default {
	name: "iCard",
    components: { Icon },
	props: {
		// value: {
		// 	type: [String, Number, Boolean],
		// 	default: false
		// },
		title: {
			type: String,
			default: ""
		},
		bordered: {
			type: Boolean,
			default: true
		},
        shadow: {
            type: Boolean,
            default: false
        },
		padding: {
			type: Number,
			default: 16
        },
        hover: {
            type: Boolean,
            default: true
        },
        icon: {
            type: String,
        },
	},
	data() {
		return {
            showHead: true,
            haveTips:false
        };
	},
	mounted() {
        this.showHead = this.title || this.$slots.title !== undefined
        this.haveTips = this.$slots.tips !== undefined
	},
	computed: {
		classes() {
			return [
				`${prefixCls}-card`,
				{
					[`${prefixCls}-card-bordered`]: !!this.bordered,
                    [`${prefixCls}-card-hover`]: this.hover || this.shadow,
                    [`${prefixCls}-card-shadow`]: this.shadow
				}
			];
		},
		headClasses() {
			return [`${prefixCls}-card-head`];
		},
		bodyClasses() {
			return [`${prefixCls}-card-body`];
        },
        tipsClasses() {
            return [`${prefixCls}-card-tips`];
        },
		bodyStyles() {
			if (this.padding !== defPadding) {
				return {
					padding: `${this.padding}px`
				};
			} else {
				return "";
			}
		}
	},
	methods: {}
};
</script>

<style lang='scss' scoped>
</style>
